<template>
  <div class="layout">
    <Sidebar />
    <div class="donor-container">
      <a-card class="box-card">
        <template #title>
          <span>捐赠管理</span>
        </template>

        <!-- 捐赠 -->
        <a-card class="section-card">
          <template #title>
            <span>捐赠项目</span>
          </template>
          <a-form :model="donationForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="项目ID" required>
              <a-input v-model:value="donationForm.projectId" placeholder="请输入项目ID" />
            </a-form-item>
            <a-form-item label="捐赠金额" required>
              <a-input-number v-model:value="donationForm.amount" :min="1" placeholder="请输入捐赠金额" style="width: 100%" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 6 }">
              <a-button type="primary" @click="donate">捐赠</a-button>
            </a-form-item>
          </a-form>
        </a-card>

        <!-- 查询捐赠金额 -->
        <a-card class="section-card">
          <template #title>
            <span>查询捐赠金额</span>
          </template>
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-form-item label="项目ID">
              <a-input v-model:value="queryForm.projectId" placeholder="请输入项目ID" />
            </a-form-item>
            <a-form-item label="捐赠者地址">
              <a-input v-model:value="queryForm.donorAddress" placeholder="请输入捐赠者地址" />
              <template #extra>
                <a-button type="primary" @click="getDonationAmount" :disabled="!queryForm.projectId || !queryForm.donorAddress">
                  查询金额
                </a-button>
              </template>
            </a-form-item>
          </a-form>
          <div v-if="donationAmount !== null">
            <p>捐赠金额：{{ donationAmount }} wei</p>
          </div>
        </a-card>

      </a-card>
    </div>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import axios from 'axios'
import Sidebar from '../components/Siderbar.vue'
export default {
  name: 'the-Donor',
  components: {
    Sidebar
  },
  data() {
    return {
      donationForm: {
        projectId: '',
        amount: null
      },
      queryForm: {
        projectId: '',
        donorAddress: ''
      },
      donationAmount: null
    }
  },
  methods: {
    async donate() {
      try {
        if (!this.validateDonationForm()) {
          return
        }

        const params = new URLSearchParams()
        params.append('amount', this.donationForm.amount)

        await axios.post(`/api/donor/project/${this.donationForm.projectId}/donate`, params)
        message.success('捐赠成功')
        this.resetDonationForm()
      } catch (error) {
        message.error('捐赠失败：' + error.message)
      }
    },

    validateDonationForm() {
      if (!this.donationForm.projectId) {
        message.warning('请输入项目ID')
        return false
      }
      if (!this.donationForm.amount) {
        message.warning('请输入捐赠金额')
        return false
      }
      return true
    },

    resetDonationForm() {
      this.donationForm = {
        projectId: '',
        amount: null
      }
    },

    async getDonationAmount() {
      try {
        const response = await axios.get(`/api/donor/project/${this.queryForm.projectId}/donation/${this.queryForm.donorAddress}`)
        this.donationAmount = response.data
        message.success('查询成功')
      } catch (error) {
        message.error('查询失败：' + error.message)
      }
    }
  }
}
</script>

<style scoped>
.layout {
  display: flex;
  min-height: 100vh;
}

.donor-container {
  padding: 20px;
  flex: 1;
  margin-left: 256px; /* 修改为与侧边栏宽度相同 */
}

.section-card {
  margin-bottom: 20px;
}

.ant-form-item-extra {
  margin-top: 10px;
}

/* 添加一些额外的样式美化 */
.box-card {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-card {
  border-radius: 4px;
}

.ant-form-item {
  margin-bottom: 24px;
}

.ant-button {
  height: 32px;
  padding: 0 16px;
}

/* 输入框样式优化 */
.ant-input,
.ant-input-number {
  border-radius: 4px;
}

.ant-textarea {
  border-radius: 4px;
  resize: vertical;
}

/* 卡片标题样式优化 */
.ant-card-head {
  border-bottom: 1px solid #f0f0f0;
}

.ant-card-head-title {
  padding: 16px 0;
  font-size: 16px;
  font-weight: 500;
}

/* 捐赠金额显示样式 */
div[v-if="donationAmount !== null"] {
  padding: 16px;
  background: #f8f8f8;
  border-radius: 4px;
  margin-top: 16px;
}

div[v-if="donationAmount !== null"] p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 强调显示金额 */
div[v-if="donationAmount !== null"] p span {
  color: #1890ff;
  font-weight: bold;
  margin-left: 4px;
}
</style>